{% load i18n %}
<div class="db-migrate-form">
  <form id="id_dbMigrateForm" action="" class="layui-form" lay-filter="dbMigrateForm">
    {% csrf_token %}
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header"><i class="fa fa-database"></i>
            <span style="padding-left: 5px">{% trans 'dataMigrate_front_header' %}</span></div>

          <div class="layui-card-body" style="padding: 20px;">
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label" style="margin: 6px 0 0 0;">
                  {% trans 'dataMigrate_front_migrateFrom' %}
                  <span class="required">*</span></label>
                <div class="layui-input-block" lay-filter="migrateCategory" id="id_migrate_category">
                  <input name="migrate_software_type" type="radio" value="0"
                         title="Current Version" checked>
                  <input name="migrate_software_type" type="radio" value="1"
                         title="ZKTimeweb2.0">
                  <input name="migrate_software_type" type="radio" value="2"
                         title="Biotime7.0">
                  {#                        <input name="migrate_software_type" type="radio" value="3"#}
                  {#                               title="WDMS5">#}
                  {#                        <input name="migrate_software_type" type="radio" value="4"#}
                  {#                               title="WDMS6" >#}
                  <input name="migrate_software_type" type="radio" value="5"
                         title="ZKTime.net3.0">
                </div>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-inline">
                <label for="id_migrate_database" class="layui-form-label">
                  {% trans 'dataMigrate_front_databaseType' %}
                  <span class="required">*</span></label>
                <div class="layui-input-inline">
                  <select name="migrate_database_type" id="id_migrate_database"
                          class="layui-input" lay-filter="migrateDatabase">
                    <option name='migrate_database' value="sqlserver_ado">{% trans 'db_sqlserver' %}</option>
                    <option name='migrate_database' value="mysql">{% trans 'db_mysql' %}</option>
                    <option name='migrate_database' value="oracle"
                            id="id_database_oracle">{% trans 'db_oracle' %}</option>
                    <option name='migrate_database' value="postgresql"
                            id="id_database_psql">{% trans 'db_postgresql' %}</option>
                    <option name='migrate_database' value="sqlite" id="id_database_slt">{% trans 'db_sqlite' %}</option>
                  </select>
                </div>
              </div>
              <div class="layui-inline">
                <label for="id_database_name"
                       class="layui-form-label">{% trans 'dataMigrate_front_databaseName' %}<span
                  class="required">*</span></label>
                <div class="layui-input-inline">
                  <input type="text" id="id_database_name" name="migrate_database_name"
                         value="" autocomplete="off" placeholder="" lay-verify=""
                         class="layui-input">
                </div>
              </div>
            </div>
            <div class="layui-form-item" data-name="normal">
              <div class="layui-inline">
                <label for="id_database_addr"
                       class="layui-form-label">{% trans 'dataMigrate_front_databaseAddress' %}
                  <span class="required">*</span></label>
                <div class="layui-input-inline">
                  <input type="text" id="id_database_addr" name="migrate_database_address"
                         value="" autocomplete="off" placeholder="" lay-verify="" class="layui-input">
                </div>
              </div>
              <div class="layui-inline">
                <label for="id_database_port"
                       class="layui-form-label">{% trans 'dataMigrate_front_databasePort' %}
                  <span class="required">*</span></label>
                <div class="layui-input-inline">
                  <input type="text" id="id_database_port" name="migrate_database_port"
                         value="" autocomplete="off" lay-verify="" class="layui-input">
                </div>
              </div>
            </div>
            <div class="layui-form-item" data-name="normal">
              <div class="layui-inline">
                <label for="id_database_user"
                       class="layui-form-label">{% trans 'dataMigrate_front_databaseUser' %}<span
                  class="required">*</span></label>
                <div class="layui-input-inline">
                  <input type="text" id="id_database_user" name="migrate_database_user"
                         value=""
                         autocomplete="off" placeholder="" lay-verify=""
                         class="layui-input">
                </div>
              </div>
              <div class="layui-inline">
                <label for="id_database_password"
                       class="layui-form-label">{% trans 'dataMigrate_front_databasePassword' %}<span
                  class="required">*</span></label>
                <div class="layui-input-inline">
                  <input type="password" id="id_database_password"
                         name="migrate_database_password"
                         value="" autocomplete="off" placeholder="" lay-verify=""
                         class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                  <div id="isvisible" onclick="adjustvisible()" style="float: right">
                    <i class="fa fa-eye-slash" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="layui-form-item" data-name="sqlite">
            <div class="layui-inline">
              <label for="id_database_sqlite"
                     class="layui-form-label">{% trans 'dataMigrate_front_sqliteFile' %}
                <span class="required">*</span></label>
              <div class="layui-input-inline">
                <input type="text" id="id_database_sqlite" name="migrate_sqlite_database"
                       value=""
                       autocomplete="off"
                       placeholder="" lay-verify="" class="layui-input">
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">{% trans 'dataMigrate_front_migrateFields' %}</label>
            <div class="layui-input-block" lay-filter="migrateFields">
              <input type="checkbox" name="migrate_field" id="id_company"
                     value="company" lay-filter="migrateCompany"
                     title={% trans "psnl_model_company" %}>
              <input type="checkbox" name="migrate_field" id="id_department"
                     value="department" lay-filter="migrateDepartment"
                     title={% trans "menu_psnl_department" %}>
              <input type="checkbox" name="migrate_field" id="id_position"
                     value="position" lay-filter="migratePosition"
                     title={% trans "menu_psnl_position" %}>
              <input type="checkbox" name="migrate_field" id="id_area"
                     value="area" lay-filter="migrateArea"
                     title={% trans "dataMigrate_front_area_or_zone" %}>
              <input type="checkbox" name="migrate_field" id="id_employee"
                     value="employee" lay-filter="migrateEmployee"
                     title={% trans "menu_psnl_employee" %}>
              <input type="checkbox" name="migrate_field" id="id_device"
                     value="device" lay-filter="migrateDevice"
                     title={% trans "menu_device_terminal" %}>
              {#                      <input type="checkbox" name="migrate_field" id="id_fingerprint"#}
              {#                             value="fingerprint"#}
              {#                             title="fingerprint">#}
              {#                      <input type="checkbox" name="migrate_field" id="id_facetemp"#}
              {#                             value="facetemp"#}
              {#                             title="facetemp">#}
              {#                      <input type="checkbox" name="migrate_field" id="id_biotemp" value="biotemp"#}
              {#                             title="biotemp">#}
              <input type="checkbox" name="migrate_field" id="id_transaction"
                     value="transaction"
                     title={% trans "menu_device_transaction" %} lay-filter="migrateTrans">
              <input type="checkbox" name="migrate_field" id="id_leave"
                     value="leave"
                     title={% trans "att_model_leave" %}>
            </div>
          </div>
          <div class="layui-form-item" id="trans_period_div">
            <label class="layui-form-label">{% trans 'dataMigrate_front_transactionPeriod' %}</label>
            <div class="layui-input-inline">
              <input type="text" name="migrate_transaction_start" id="id_trans_start"
                     class='layui-input layui-input-time'>
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline">
              <input type="text" name="migrate_transaction_end" id="id_trans_end"
                     class="layui-input layui-input-time">
            </div>
          </div>
          <div class="layui-form-item ">
            <label for="id_database_name"
                   class="layui-form-label">{% trans 'dataMigrate_front_migrateStatus' %}</label>
            <div class="layui-input-block" lay-filter="transPeriod">
              <input type="text" id="id_migrate_status" name="migrate_status"
                     value="{{ migrate_process }}" readonly="readonly">
              <r>
                <button id="id_clean_cache" lay-submit="" lay-filter="cleanCache">
                  {% trans 'dataMigrate_cache_clean' %}</button>
                <p style="font-family:times;color:grey">{% trans 'dataMigrate_cache_clean_help' %}</p>
              </r>
            </div>
          </div>


          <div class="layui-form-item" style="margin: 30px;">
            <div class="layui-input-block">
              <button id="id_testconn_btn" class="layui-btn" style="min-width: 120px" lay-submit=""
                      lay-filter="migrateTest">{% trans 'dataMigrate_front_btn_testConnect' %}
              </button>
              {#              <button id="id_testconn_btn" class="layui-btn" style="min-width: 120px" lay-submit=""#}
              {#                      lay-filter="migrateSave">{% trans 'btn_save' %}#}
              {#              </button>#}
              <button id="id_migrate_btn" class="layui-btn" style="min-width: 120px" lay-submit=""
                      lay-filter="migrateExc">{% trans 'dataMigrate_front_btn_Migrate' %}
              </button>
              <button id="id_clear_conn_btn" class="layui-btn" style="min-width: 120px" lay-submit=""
                      lay-filter="clear_conn">{% trans 'dataMigrate_front_btn_clearConnectInfo' %}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
<script>
  function initPage() {
    var db_type = $('#id_migrate_database').val();
    var isTrans = $("#id_dbMigrateForm #id_transaction").is(':checked');
    var mCategory = $('#id_migrate_category input[name="migrate_software_type"]:checked').val();
    if (mCategory == 0 || mCategory > 2) {
      $("#id_leave").attr("disabled", "disabled");
    } else {
      $("#id_leave").removeAttr("disabled");
    }
    if (mCategory == 5) {
      $("#id_company").attr("disabled", "disabled");
      $("#id_position").attr("disabled", "disabled");
      $("#id_device").attr("disabled", "disabled");
      $("#id_database_slt").removeAttr("disabled");
    } else if (mCategory == 3) {
      $("#id_company").attr("disabled", "disabled");
      $("#id_position").attr("disabled", "disabled");
      $("#id_database_slt").attr("disabled", "disabled");
    } else {
      $("#id_database_slt").attr("disabled", "disabled");
    }
    if (isTrans == true) {
      $("#trans_period_div").show();
    } else {
      $("#trans_period_div").hide();
    }
    if (db_type == 'sqlite') {
      pageSwitch(true)
    } else {
      pageSwitch(false)
    }
  }

  layui.use(['form', 'layer', 'laydate', 'element'], function () {
    var maxHeight = window.innerHeight - 93 - Math.floor(Math.random() * -5 + 5)
      , edit_form = $("#id_dbMigrateForm");
    if (edit_form.closest('.layui-layer').length === 0) {
      edit_form.closest('.layui-tab-item').css({
        'height': maxHeight,
        'overflow': 'auto'
      });
    }
    var form = layui.form;
    var laydate = layui.laydate;
    var enableBtn = "layui-btn";
    var unableBtn = "layui-btn layui-btn-disabled";
    $("form.layui-form input.layui-input-time").each(function () {
      laydate.render({elem: this, type: 'datetime', trigger: 'click'});
    });
    form.render();
    $("#id_migrate_category").on('click', function () {
      debugger;
      var softwareCategory = $('#id_migrate_category input[name="migrate_software_type"]:checked').val();
      var dboracle = $("#id_database_oracle");
      var dbpsql = $("#id_database_psql");
      var dbsqlite = $("#id_database_slt");

      if (softwareCategory === '3') {
        dboracle.attr("disabled", "disabled");
        dbpsql.attr("disabled", "disabled");
        dbsqlite.attr("disabled", "disabled");
        $("#id_position").attr("disabled", "disabled");
        $("#id_company").prop('checked', false);
        $("#id_company").attr("disabled", "disabled");
      } else if (softwareCategory === '5') {
        dboracle.attr("disabled", "disabled");
        dbpsql.removeAttr("disabled");
        dbsqlite.removeAttr("disabled");
        $("#id_position").attr("disabled", "disabled");
        $("#id_device").prop('checked', false);
        $("#id_device").attr("disabled", "disabled");
        $("#id_company").prop('checked', false);
        $("#id_company").attr("disabled", "disabled");
      } else {
        dboracle.removeAttr("disabled");
        dbpsql.removeAttr("disabled");
        dbsqlite.attr("disabled", "disabled");
        $("#id_position").removeAttr("disabled");
        $("#id_device").removeAttr("disabled");
        $("#id_company").removeAttr("disabled");
      }

      if (softwareCategory == 0 || softwareCategory == 5) {
        $("#id_leave").prop('checked', false);
        $("#id_leave").attr("disabled", "disabled");
      } else {
        $("#id_leave").removeAttr("disabled");
      }

      setFields()
      form.render();
    });

    form.on('select(migrateDatabase)', function (data) {
      debugger;
      var databaseCategory = data.value;
      migrate_daatabase_selected(databaseCategory);
    });

    function migrate_daatabase_selected(databaseCategory) {
      var port = $("#id_database_port");
      var dbname = $("#id_database_name");
      var dbuser = $("#id_database_user");
      var dbpwd = $("#id_database_password");
      var softwareCategory = $('#id_migrate_category input[name="migrate_software_type"]:checked').val();
      if (databaseCategory === 'postgresql') {
        pageSwitch(false);
        if (softwareCategory === '1') {
          port.val("65432")
        } else {
          port.val("5432");
        }
        dbname.val("zkeco_db");
        dbuser.val("postgres");
        dbpwd.val("suse_zkeco");
      } else if (databaseCategory === 'sqlite') {
        pageSwitch(true);
      } else {
        pageSwitch(false);
        if (databaseCategory === 'sqlserver_ado') {
          port.val("1433")
        } else if (databaseCategory === 'mysql') {
          port.val("3306")
        } else {
          port.val("1521")
        }
        dbname.val("");
        dbuser.val("");
        dbpwd.val("");
      }
      form.render();
    }

    form.on('checkbox(migrateCompany)', function (obj) {

    });
    form.on('checkbox(migrateDepartment)', function (obj) {

    });
    form.on('checkbox(migratePosition)', function (obj) {

    });
    form.on('checkbox(migrateArea)', function (obj) {

    });
    form.on('checkbox(migrateEmployee)', function (obj) {

    });
    form.on('checkbox(migrateDevice)', function (obj) {

    });

    function setFields(fieldName) {
      debugger;
      var migrate_fields = [];
      var mCategory = $('#id_migrate_category input[name="migrate_software_type"]:checked').val();
      if (mCategory == 0) {
        var migrate_fields_all = ['company', 'department', 'position', 'area'];
        migrate_fields_all.forEach(item => {
          if (item != fieldName) {
            migrate_fields.push(item)
          }
        });
        fillFields(migrate_fields);
        {#setFieldsEnable(migrate_fields, false);#}
      } else if (mCategory == 5) {
        migrate_fields = ['company', 'position'];
        fillFields(migrate_fields, false);
        migrate_fields = ['department', 'area'];
        setFieldsEnable(migrate_fields, true);
      }


      form.render('checkbox');
    }

    form.on('checkbox(migrateTrans)', function (obj) {
      var isTrans = document.getElementById("id_transaction").checked;
      if (isTrans == true) {
        $("#trans_period_div").show();
      } else {
        $("#trans_period_div").hide();
        $("#id_trans_start").val('');
        $("#id_trans_end").val('');
      }
    });

    form.on('submit(cleanCache)', function (data) {
      var url = "/base/db_migrate/";
      var csrf = data.field['csrfmiddlewaretoken'];
      $.ajax({
        url: url
        , type: "POST"
        , data: {csrfmiddlewaretoken: csrf}
        , success: function (response, xhr) {
          layer.msg(gettext('cache cleared.'), {icon: 6});
          layer.close(loadIndex);
        }
        , error: function (xhr, error, e) {
          if (xhr.responseJSON.value) {
            layer.msg(gettext(xhr.responseJSON.value[0]), {icon: 5});
          } else {
            layer.msg(gettext('system_error_please_try_again'), {icon: 5});
          }
          layer.close(loadIndex);
        }
      });
      return false;
    });
    form.on('submit(migrateExc)', function (data) {
      debugger;
      var arr = new Array();
      $("input:checkbox[name='migrate_field']:checked").each(function (i) {
        arr[i] = $(this).val();
      });
      data.field.migrate_field = arr;
      var csrf = data.field['csrfmiddlewaretoken'];
      var value = {
        migrate_software_type: data.field['migrate_software_type']
        , migrate_database_type: data.field['migrate_database_type']
        , migrate_database_address: data.field['migrate_database_address']
        , migrate_database_port: data.field['migrate_database_port']
        , migrate_database_name: data.field['migrate_database_name']
        , migrate_database_user: data.field['migrate_database_user']
        , migrate_database_password: data.field['migrate_database_password']
        , migrate_database_tables: data.field['migrate_field']
        , migrate_transaction_start: data.field['migrate_transaction_start']
        , migrate_transaction_end: data.field['migrate_transaction_end']
        , migrate_sqlite_database: data.field['migrate_sqlite_database']
        , exc_migrate: 1
        , is_test: 0
      };
      var loadIndex = layer.load();
      var url = "/base/api/dbMigrate/";
      $.ajax({
        url: url
        , type: "POST"
        , data: {'name': 'db_migrate', value: JSON.stringify(value), csrfmiddlewaretoken: csrf}
        , dataType: "json"
        , success: function (response, xhr) {
          debugger;
          layer.msg(gettext('backend processing....'), {icon: 6});
          layer.close(loadIndex);
        }
        , error: function (xhr, error, e) {
          if (xhr.responseJSON.value) {
            layer.msg(gettext(xhr.responseJSON.value[0]), {icon: 5});
          } else {
            layer.msg(gettext('system_error_please_try_again'), {icon: 5});
          }
          layer.close(loadIndex);
        }
      });
      return false;
    });
    form.on('submit(migrateTest)', function (data) {
      debugger;
      var csrf = data.field['csrfmiddlewaretoken'];
      var value = {
        migrate_software_type: data.field['migrate_software_type']
        , migrate_database_type: data.field['migrate_database_type']
        , migrate_database_address: data.field['migrate_database_address']
        , migrate_database_port: data.field['migrate_database_port']
        , migrate_database_name: data.field['migrate_database_name']
        , migrate_database_user: data.field['migrate_database_user']
        , migrate_database_password: data.field['migrate_database_password']
        , migrate_sqlite_database: data.field['migrate_sqlite_database']
        , exc_migrate: 0
        , is_test: 1
      };
      var loadIndex = layer.load();
      var url = "/base/api/dbMigrate/";
      $.ajax({
        url: url
        , type: "POST"
        , data: {'name': 'db_migrate', value: JSON.stringify(value), csrfmiddlewaretoken: csrf}
        , dataType: "json"
        , success: function (response, xhr) {
          layer.msg(gettext('connection_success'), {icon: 6});
          layer.close(loadIndex);
        }
        , error: function (xhr, error, e) {
          if (xhr.responseJSON.value) {
            layer.msg(gettext(xhr.responseJSON.value[0]), {icon: 5});
          } else {
            layer.msg(gettext('system_error_please_try_again'), {icon: 5});
          }
          layer.close(loadIndex);
        }
      });
      return false;
    });
    form.on('submit(clear_conn)', function (data) {
      var loadIndex = layer.load();
      $.ajax({
        url: '/base/api/dbMigrate/clear_conn/'
        , type: "GET"
        , success: function (response, xhr) {
          layer.msg(gettext('Clear Success'), {icon: 6});
          $("form").find('input[type="text"]').each(function () {
            $(this).val("");
          });
          $('input:checkbox[name="migrate_field"]:checked').each(function () {
            $(this).prop("checked", false);
          });
          $('#id_database_password').val('');
        }
      });
      layer.close(loadIndex);
      return false;
    });
    $(function () {
      debugger;
      var apiUrl = '/base/api/dbMigrate/?name=db_migrate';
      $.ajax({
        url: apiUrl,
        type: 'GET',
        dataType: 'json',
        success: function (response) {
          debugger;
          var vdata = response.data;
          if (vdata.length > 0) {
            var val = vdata[0].value;
            var paramValue = JSON.parse(val);
            var migrate_fields = paramValue.migrate_database_tables;
            if (migrate_fields) {
              fillFields(migrate_fields);
            } else {
              $("#trans_period_div").hide();
            }
            // var isTrans = document.getElementById("id_transaction").checked;
            delete paramValue['migrate_database_tables'];
            form.val('dbMigrateForm', paramValue);
            var status = $("#id_migrate_status").val();
            if (status === "processing") {
              $("#id_testconn_btn").removeClass();
              $("#id_testconn_btn").attr('class', unableBtn);
            }
            form.render();
          } else {
            migrate_daatabase_selected('sqlserver_ado');
              setFields();
          }

          initPage();
          form.render();
        }
      });
    });
  });

  function pageSwitch(sqlite) {
    if (sqlite) {
      $('div[data-name=normal]').hide();
      $('div[data-name=sqlite]').show();
      $('div[data-name=normal]').find("input").each(function () {
        $(this).val('');
      });
    } else {
      $('div[data-name=normal]').show();
      $('div[data-name=sqlite]').hide();
      $('#id_database_sqlite').val('');
    }
  }

  function fillFields(fields, isChecked = true) {
    debugger;
    fields.forEach(function (elem) {
      debugger;
      switch (elem) {
        case 'company':
          $("#id_company").prop('checked', isChecked);
          break;
        case 'department':
          $("#id_department").prop('checked', isChecked);
          break;
        case 'position':
          $("#id_position").prop('checked', isChecked);
          break;
        case 'area':
          $("#id_area").prop('checked', isChecked);
          break;
        case 'employee':
          $("#id_employee").prop('checked', isChecked);
          break;
        case 'device':
          $('#id_device').prop('checked', isChecked);
          break;
        case 'transaction':
          $('#id_transaction').prop('checked', isChecked);
          break;
        case 'leave':
          $('#id_leave').prop('checked', isChecked);
          break;
        case 'fingerprint':
          $('#id_fingerprint').prop('checked', isChecked);
          break;
        case 'facetemp':
          $('#id_facetemp').prop('checked', isChecked);
          break;
        case 'biotemp':
          $('#id_biotemp').prop('checked', isChecked);
          break;
      }
    });
  };

  function setFieldsEnable(fields, enableState) {
    debugger;
    fields.forEach(function (elem) {
      if (enableState) {
        switch (elem) {
          case 'company':
            $("#id_company").removeAttr("disabled");
            break;
          case 'department':
            $("#id_department").removeAttr("disabled");
            break;
          case 'position':
            $("#id_position").removeAttr("disabled");
            break;
          case 'area':
            $("#id_area").removeAttr("disabled");
            break;
          case 'employee':
            $("#id_employee").removeAttr("disabled");
            break;
          case 'device':
            $('#id_device').removeAttr("disabled");
            break;
          case 'transaction':
            $('#id_transaction').removeAttr("disabled");
            break;
          case 'leave':
            $('#id_leave').removeAttr("disabled");
            break;
          case 'fingerprint':
            $('#id_fingerprint').removeAttr("disabled");
            break;
          case 'facetemp':
            $('#id_facetemp').removeAttr("disabled");
            break;
          case 'biotemp':
            $('#id_biotemp').removeAttr("disabled");
            break;
        }
      } else {
        switch (elem) {
          case 'company':
            $("#id_company").attr("disabled", "disabled");
            break;
          case 'department':
            $("#id_department").attr("disabled", "disabled");
            break;
          case 'position':
            $("#id_position").attr("disabled", "disabled");
            break;
          case 'area':
            $("#id_area").attr("disabled", "disabled");
            break;
          case 'employee':
            $("#id_employee").attr("disabled", "disabled");
            break;
          case 'device':
            $('#id_device').attr("disabled", "disabled");
            break;
          case 'transaction':
            $('#id_transaction').attr("disabled", "disabled");
            break;
          case 'leave':
            $('#id_leave').attr("disabled", "disabled");
            break;
          case 'fingerprint':
            $('#id_fingerprint').attr("disabled", "disabled");
            break;
          case 'facetemp':
            $('#id_facetemp').attr("disabled", "disabled");
            break;
          case 'biotemp':
            $('#id_biotemp').attr("disabled", "disabled");
            break;
        }
      }
    });
  };

  var visible = true;

  function adjustvisible() {
    var classVis = "fa fa-eye";
    var classUvis = "fa fa-eye-slash";
    var input = $("#id_database_password");
    if (visible) {
      $("#isvisible").children("i").removeClass();
      $("#isvisible").children("i").addClass(classVis);
      visible = false;
      input.attr("type", "text");
    } else {
      $("#isvisible").children("i").removeClass();
      $("#isvisible").children("i").addClass(classUvis);
      visible = true;
      input.attr("type", "password");
    }
  }
</script>